<template>
    <div class="default-main ba-table-box">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

                <!-- 表格顶部菜单 -->
                <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
                <TableHeader
                    :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                    :quick-search-placeholder="t('Quick search placeholder', { fields: t('cashflow.standby.quick Search Fields') })"
                >
                <div v-for="item, index in companyList" :key="index" class="statics-table"  v-show="item.id == commpany_id">
                    <span>{{ item.company_name }}:</span>
                    <span>收入 {{item.statics.standbys ? item.statics.standbys.shouru : 0}}</span> | 
                    <span>支出 {{item.statics.standbys ? item.statics.standbys.zhichu : 0}}</span> | 
                    <span>结余 {{item.statics.standbys ? Number(item.statics.standbys.shouru) - Number(item.statics.standbys.zhichu) : (item.statics.standbys ? item.statics.standbys.shouru : 0)}}</span>
                </div>
                </TableHeader>

                <!-- 表格 -->
                <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
                <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
                <Table ref="tableRef"></Table>

                <!-- 表单 -->
                <PopupForm />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { companyLists } from '/@/api/backend'
import { useRouter } from 'vue-router'
defineOptions({
    name: 'cashflow/standby',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
const companyList = ref([])
const router = useRouter()
let commpany_id = ref(0)
const temp_data = window.localStorage.getItem('$temp_data');
const company = temp_data ? JSON.parse(temp_data) : {};
if(company.id) {
    console.log('company.id', company.id)
    commpany_id.value = company.id
}
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/cashflow.Standby/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('cashflow.standby.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('cashflow.standby.cashflowcompany__company_name'), prop: 'cashflowCompany.company_name', align: 'center', operatorPlaceholder: t('Fuzzy query'),  operator: 'LIKE' },
            { label: t('cashflow.standby.type'), prop: 'type', align: 'center',  operator: 'eq', sortable: false, replaceValue: { '0': t('cashflow.standby.type 0'), '1': t('cashflow.standby.type 1') } },
            { label: t('cashflow.standby.date'), prop: 'date', align: 'center', operator: 'eq', sortable: 'custom' },
            { label: t('cashflow.standby.project_name'), prop: 'project_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('cashflow.standby.desc'), prop: 'desc', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('cashflow.standby.cashflow_type'), prop: 'cashflow_type', align: 'center',  operator: 'eq', sortable: false, replaceValue: { '0': t('cashflow.standby.cashflow_type 0'), '1': t('cashflow.standby.cashflow_type 1') } },
            { label: t('cashflow.standby.amount'), prop: 'amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('cashflow.standby.amount2'), prop: 'amount2', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        filter: {
            commpany_id: commpany_id.value
        },
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { type: '0', date: null, cashflow_type: '0', amount2: 0 },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
    getCompanyLists()
})

const getCompanyLists = () => {
    companyLists().then((res: any) => {
        companyList.value = res.data.list
    })
}

watch(() => {
    return router.currentRoute.value.fullPath
}, (val) => {
    if(val == '/admin/cashflow/standby') {
        const temp_data = window.localStorage.getItem('$temp_data');
        const company = temp_data ? JSON.parse(temp_data) : {};
        if(company.id) {
            console.log('company.id', company.id)
            commpany_id.value = company.id
            baTable.table.filter = { commpany_id: commpany_id.value }
            baTable.getIndex()
        }
    }
})
</script>

<style scoped lang="scss">
    .text-blue { color: #409EFF; }
    .text-red { color: #F56C6C; }
    .text-green { color: #67C23A; }
    .statics-content { background-color: #ffffff;padding: 10px; }
    .statics-table { 
        span { padding: 0 5px; }
    }
</style>
